<template>
    <div>
        <h4 style="text-align: center;padding: 10px 0;">问诊记录</h4>
        <el-container style="width: 90%;margin-left: 5%;">
            <el-aside width="400px" style="height: auto;">
                <el-card shadow="always" style="padding-bottom: 20px;">
                    <el-form :mdoel="customerFormData" label-position="left" class="demo-table-expand">
                        <el-form-item label="宠物名：">
                            <span>{{ customerFormData.petName }}</span>
                        </el-form-item>
                        <el-form-item label="主人名：">
                            <span>{{ customerFormData.customerName }}</span>
                        </el-form-item>
                        <el-form-item label="体重：">
                            <span>{{ customerFormData.weight }}kg</span>
                        </el-form-item>
                        <el-form-item label="年龄：">
                            <span>{{ customerFormData.age }}岁</span>
                        </el-form-item>
                        <el-form-item label="预约时间：">
                            <span>{{ customerFormData.reserveTime }}</span>
                        </el-form-item>
                        <el-form-item label="问诊时间：">
                            <span>{{ customerFormData.diagnosisTime }}</span>
                        </el-form-item>
                        <el-form-item label="病情概述：">
                            <span>{{ customerFormData.diseaseAnalysis }}</span>
                        </el-form-item>
                        <el-form-item label="治疗方案：">
                            <span>{{ customerFormData.treatmentPlan }}</span>
                        </el-form-item>
                        <el-form-item label="药物处方：">
                            <span>{{ petDrugList }}</span>
                        </el-form-item>
                        <el-form-item label="医嘱:">
                            <span>{{ customerFormData.doctorTell }}</span>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-aside>
            <el-main style="padding:0 0 0 20px;width: 200px;">

                <el-card style="text-align: center;">
                    <div slot="header" class="clearfix" style="height: 5px;line-height: 5px;">
                        <span>检查记录</span>
                    </div>
                    <div>
                        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"
                            style="min-height: 300px;">
                            <el-tab-pane label="血液生化" name="first">
                                <el-table :data="checkResult" style="width: 100%" v-if="checkResult != null">
                                    <el-table-column prop="attributeName" label="属性" width="100">
                                    </el-table-column>
                                    <el-table-column prop="exam" label="数值" width="250">
                                    </el-table-column>
                                    <el-table-column prop="standardValue" label="参考值">
                                    </el-table-column>
                                </el-table>
                                <p v-else>暂无数据</p>
                            </el-tab-pane>
                            <el-tab-pane label="超声检查" name="second">
                                <el-table :data="checkResult" style="width: 100%" v-if="checkResult != null">
                                    <el-table-column prop="exam" label="数值" width="180">
                                    </el-table-column>
                                </el-table>
                                <p v-else>暂无数据</p>
                            </el-tab-pane>
                            <el-tab-pane label="尿常规" name="third">
                                <el-table :data="checkResult" style="width: 100%" v-if="checkResult != null">
                                    <el-table-column prop="attributeName" label="属性" width="180">
                                    </el-table-column>
                                    <el-table-column prop="exam" label="数值" width="180">
                                    </el-table-column>
                                    <el-table-column prop="standardValue" label="参考值">
                                    </el-table-column>
                                </el-table>
                                <p v-else>暂无数据</p>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: "first",
            treatId: 0,
            customerFormData: {},
            planForm: {},
            options: [],
            checkResult: [],
            petDrugList: ""
        }
    },
    methods: {
        getCheckResult(auxiliaryCheckId) {//获取辅助检查结果 根据检查类型id和问诊id
            console.log("getCheckResult==>", auxiliaryCheckId)
            this.request.get("/attribute-exam/byDiagnosis/", {
                params: {
                    diagnosisId: this.treatId,
                    auxiliaryCheckId: auxiliaryCheckId
                }
            }).then(res => {
                console.log("getCheckResult==>", res)
                if (res.code == 200) {
                    this.checkResult = res.data
                }

            })
        },
        handleClick(tab, event) {
            //切换tab面板 --辅助检查结果
            this.getCheckResult(parseInt(tab.index) + 1)
        },
        load() {//加载数据 根据问诊id
            console.log("this.treatId==>",this.treatId)
            
            this.request.get("/diagnosis/getreviewtreatinfo/" + this.treatId).then(res => {
                this.customerFormData = res.data
                res.data.petDrugList.map(item => {
                    if (item != res.data.petDrugList[res.data.petDrugList.length - 1]) {
                        this.petDrugList = this.petDrugList + item.drugName + '、'
                    } else {
                        this.petDrugList = this.petDrugList + item.drugName
                    }
                })
                console.log("当前res===>", res)
                this.getCheckResult(1)
            })
        }
    },
    created() {

    },
    mounted() {
        this.treatId = this.$route.params.id;
        console.log("当前id===>", this.treatId)
        this.load()

    }
}
</script>

<style lang="less" scoped>
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.check {
    .el-col {
        padding: 5px 5px;
    }
}
</style>